<template>
  <!-- 查看评论 -->
  <div>
    <div class="box-1">
      <div><img src="../assets/发货单图标/订单信息-服务评价.png" alt="" /></div>

      <p>订单信息</p>
    </div>
    <div class="box-2">
      <p class="box-21">商品</p>
      <p class="box-22">{{prodName}}</p>
      <p class="box-21">发货时间</p>
      <p class="box-22">{{sendTime}}</p>
      <p class="box-21">到达时间</p>
      <p class="box-22">{{receiveTime}}</p>
    </div>
    <div class="box-1">
      <div><img src="../assets/发货单图标/订单信息-服务评价.png" alt="" /></div>

      <p>服务评价</p>
    </div>
    <div class="box-5">
      <van-row>
        <van-col span="8">描述相符</van-col>
        <van-col span="12"><van-rate @change="ConformityPoint"  v-model="prodConformityPoint" /></van-col>
        <van-col span="4">{{prodConformityPoint}}分</van-col>
      </van-row>
      <van-row>
        <van-col span="8">物流速度</van-col>
        <van-col span="12"><van-rate @change="SpeedPoint"  v-model="logisticsSpeedPoint" /></van-col>
        <van-col span="4">{{logisticsSpeedPoint}}分</van-col> </van-row
      ><van-row>
        <van-col span="8">服务质量</van-col>
        <van-col span="12"><van-rate @change="lityPoint"  v-model="serviceQualityPoint" /></van-col>
        <van-col span="4">{{serviceQualityPoint}}分</van-col>
      </van-row>
    </div>
    <div class="box-1">
      <textarea v-model="comment" ></textarea>
    </div>
    <van-button @click="add" round type="info">提交评论</van-button>
  </div>
<!-- 


serialNo	string	true	普通参数		订单号
prodConformityPoint	number	true	普通参数		商品描述相符评分 1- 5
logisticsSpeedPoint	number	true	普通参数		物流速度评分 1- 5
serviceQualityPoint	number	true	普通参数		服务质量评分 1- 5
comment	string	false	普通参数		评价描述


 -->
</template>

<script>
import {evaluatekkData,evaluateInfoData} from '../request/api'
export default {
  data() {
    return {
      //评论内容
      comment:'',
      serialNo:this.$route.query.serialNo,
      serviceQualityPoint:0,
      logisticsSpeedPoint:0,
      prodConformityPoint:0,
      prodName:'',
      sendTime:'',
      receiveTime:''

    };
  },
  methods:{
    ConformityPoint(val){
      console.log(val);
      this.prodConformityPoint=val
    },
    SpeedPoint(val){
      console.log(val);
      this.logisticsSpeedPoint=val
    },
    lityPoint(val){
      console.log(val);
      this.serviceQualityPoint=val
    },
    add(){
      // console.log(this.comment);
      // console.log(this.prodConformityPoint);
      // console.log(this.logisticsSpeedPoint);
      // console.log(this.serviceQualityPoint);
      evaluatekkData({
        serialNo:this.serialNo,
        prodConformityPoint:this.prodConformityPoint,
        logisticsSpeedPoint:this.logisticsSpeedPoint,
        serviceQualityPoint:this.serviceQualityPoint,
        comment:this.comment
      }).then(res=>{
        // console.log(res);
        this.$router.push('/orderList?id=3')
      })
    }
  },
  created(){
    evaluateInfoData({
         serialNo:this.serialNo
    }).then(res=>{
      console.log(res);
      this.prodName=res.data.prodName
      this.sendTime=res.data.sendTime
      this.receiveTime=res.data.receiveTime
    })
  }

};
</script>
 
<style lang = "less" scoped>
.box-1 {
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #f4fbfe;
  img {
    padding: 10px 20px;
  }
  p {
    flex: 1;
    color: #003497;
  }
}
.box-2 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  color: #ccc;
  .box-21 {
    width: 25%;
    text-align: center;
  }
  .box-22 {
    width: 75%;
  }
}
.van-button{
  width: 100%;
  line-height: 50px;
  font-size: 20px;
}
.box-1{
  width: 100%;
  textarea[data-v-0d07f5fc]{
    width: 100%;
  }
}
</style>